<template>
  <div class="table_caozuo ServiceCommissionsRule">
    <template v-for="(item,index) in btn">
      <el-button
        :key="index"
        @click="handler(index)"
        v-if="item.isShow"
        :type="item.type"
        :icon="item.icon"
      >{{item.title}}</el-button>
    </template>
    <avue-crud
      ref="crud"
      style="width:100%;margin-top:24px"
      :data="loadData"
      :option="tableOption"
      @selection-change="selectionChange"
    >
      <template slot-scope="scope" slot="indexLabel">
        <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
        <el-button
          @click="upDown(scope.row)"
          type="text"
          :icon="scope.row.status == '01'?'el-icon-circle-check':'el-icon-circle-close'"
        >{{scope.row.status == '01'?'停用':'启用'}}</el-button>
      </template>
    </avue-crud>
    <template>
      <div style="width:100%;position:relative;height:50px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
    <el-dialog :title="title?'新增':'保存'" :visible.sync="dialogFormVisible" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item label="佣金规则名称" prop="profitRuleName">
          <el-input v-model="ruleForm.profitRuleName" style="width:50%"></el-input>
        </el-form-item>
        <!-- <el-form-item label="适用渠道类型" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="分公司"></el-radio>
            <el-radio label="代理商"></el-radio>
          </el-radio-group>
        </el-form-item>-->
        <el-form-item label="涉及业态" prop="businessType" class="businessType">
          <el-checkbox-group
            v-model="ruleForm.businessType"
            v-for="(item,index) in xsleList"
            :key="index"
          >
            <el-checkbox
              :label="item.value"
              :checked="item.checked"
              @change="(value)=>businessTypeChange(value,index,item)"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          :label="item.label + '分润'"
          v-for="(item,index) in ruleForm.ruleTypeList1"
          :key="index"
          :prop="'ruleTypeList1.' + index + '.meteringUnit'"
          :rules="{required: true, trigger: 'change'}"
        >
          <el-radio-group
            v-model="item.meteringUnit"
            @change="(value) => meteringUnitChange(value, index)"
          >
            <el-radio label="00" style="margin-bottom:8px" :disabled="item.businessTypeDisabled">
              按订单数量计算，每单
              <el-input-number
                v-model="item.commissionNum"
                placeholder="金额"
                :disabled="item.disabled || item.businessTypeDisabled"
                controls-position="right"
                style="width:21%"
                :min="0"
              ></el-input-number>元计算佣金（包括线上、线下所有订单）
            </el-radio>
            <el-radio label="01" :disabled="item.businessTypeDisabled">
              按订单金额计算，每单
              <el-input-number
                v-model="item.benefitProportion"
                placeholder="百分比"
                :disabled="!item.disabled || item.businessTypeDisabled"
                controls-position="right"
                style="width:20%"
                :min="0"
                :max="100"
              ></el-input-number>%计算佣金（包括线上、线下所有订单）
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="01">启用</el-radio>
            <el-radio label="00">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave()" :loading="loading" v-if="title">保 存</el-button>
        <el-button type="primary" @click="handleUpdate()" :loading="loading" v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src='./ServiceCommissionsRule.js'></script>

<style lang="scss">
.ServiceCommissionsRule {
  margin: 10px 0px;
  .businessType {
    .el-form-item__content {
      display: flex;
      .el-checkbox-group {
        margin-right: 10px;
      }
    }
  }
  .el-input-number__increase {
    display: none !important;
  }
  .el-input-number__decrease {
    display: none !important;
  }
}
</style>